<template>
  <h2>当前求和为：{{ sum }}</h2>
  <button @click="sum++">点我</button>
</template>

<script>
import {ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from "vue";

export default {
  name: "Demo",
  // 1. 通过配置项的形式配置生命周期钩子
  // beforeCreate() {
  //   console.log('-----beforeCreate--------');
  // },
  // created() {
  //   console.log('-----created--------');
  // },
  // beforeMount() {
  //   console.log('-----beforeMount--------');
  // },
  // mounted() {
  //   console.log('-----mounted-------');
  // },
  // beforeUpdate() {
  //   console.log('-----beforeUpdate-------');
  // },
  // updated() {
  //   console.log('-----updated------');
  // },
  // beforeUnmount() {
  //   console.log('-----beforeUnmount------');
  // },
  // unmounted() {
  //   console.log('-----unmounted------');
  // },
  setup() {
    let sum = ref(0);
    // 2. 通过组合api的方式配置生命周期钩子
    onBeforeMount(() => {
      console.log('------onBeforeMount--------')
    });
    onMounted(() => {
      console.log('------onMounted--------')
    });
    onBeforeUpdate(() => {
      console.log('------onBeforeUpdate--------')
    });
    onUpdated(() => {
      console.log('------onUpdated--------')
    });
    onBeforeUnmount(() => {
      console.log('------onBeforeUnmount--------')
    });
    onUnmounted(() => {
      console.log('------onUnmounted--------')
    });
    return {
      sum
    };
  },
}
</script>

<style scoped>

</style>